<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 需求： 通过手机号查询会员的详细信息 -->
    <form>
        <p>请输入手机号: <input type="text" class="tel"></p>
        <p><button>查询</button></p>
    </form>

    <h2>查询结果：</h2>
    <div class="result"></div>

    <script>
        function select() {
            var tel = document.querySelector(".tel");
            var btn = document.querySelector("button");
            var result = document.querySelector(".result");

            btn.onclick = function(e) {
                btn.innerHTML = "loading";
                e.preventDefault();

                var telVal = tel.value;

                // 发起ajax请求
                var xhr = new XMLHttpRequest();
                xhr.open('get', `./03_select.php?tel=${telVal}`, true);
                xhr.send();
                xhr.onreadystatechange = function() {

                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var data = JSON.parse(xhr.responseText);
                        if (data.code == 0) {
                            let html = `
                                    <p>Id: ${data.list[0].Id}</p>
                                    <p>姓名: ${data.list[0].username}</p>
                                    <p>手机号: ${data.list[0].tel}</p>
                                    <p>密码: ${data.list[0].pw}</p>
                                `;
                            result.innerHTML = html;

                        } else {
                            result.innerHTML = "查询失败";
                        }
                        btn.innerHTML = "查询";
                        tel.value = "";
                    }
                }
            }
        }
        select();
    </script>
</body>

</html>